import {Component, OnInit, Input, SimpleChanges} from '@angular/core';

import {DatePipe} from '@angular/common';

@Component({
  selector: 'app-ultrashort-forecasting-power',
  templateUrl: './ultrashort-forecasting-power.component.html',
  styleUrls: ['./ultrashort-forecasting-power.component.css']
})
export class UltrashortForecastingPowerComponent implements OnInit {
  @Input() seriesDatas: any[][];
  @Input() min: Date;
  @Input() max: Date;
  @Input() interval: string;
  echartsIntance: any;
  options: any;
  series: seriesData[] = [];

  constructor(
    private datePipe: DatePipe,
  ) {
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['seriesDatas'] && changes['seriesDatas'].currentValue) {
      this.initData();
    }
  }

  ngOnInit() {
    this.initData();
  }

  initData() {
    let interval: number,
      xAxisFormatter: any;
    if (this.interval === 'short') {
      interval = 1000 * 60 * 60;
      xAxisFormatter = (value, index) => {
        return this.datePipe.transform(new Date(value), 'HH:mm')
      };
    } else {
      interval = 1000 * 60 * 60 * 6;
      xAxisFormatter = (value, index) => {
        return index * 6;
      };
    }
    this.options = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: 10,
        containLabel: true
      },
      xAxis: {
        type: 'time',
        boundaryGap: false,
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          formatter: xAxisFormatter,
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        interval: interval,
        min: this.min,
        max: this.max
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        axisLine: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: '#fff',
            opacity: 0.4
          }
        }
      },
      series: [
        {
          name: '预测功率',
          smooth: 0.6,
          symbol: 'none',
          type: 'line',
          data: this.seriesDatas
        }
      ]
    };
    this.updateEchart();
  }

  //初始化图表数据
  onChartInit(ec: any) {
    this.echartsIntance = ec;
    this.updateEchart();
  }

  //更新图表数据
  updateEchart() {
    if (this.echartsIntance != null) {
      this.echartsIntance.setOption(this.options);
    }
  }
}

interface seriesData {
  name: string;
  type: string;
  smooth: boolean;
  data: any[];
  symbol?: boolean
}
